<template>
	<view class=" bg-gradual-blue pos-f" style="height: 100vh;">
		<view class="flex-c flex-fill">
			<stop bgColor="">
				<view slot="content">日历任务</view>
			</stop>
			<view class="pos-r flex1">
				<view class="padlr2">
					<view class="flex-r flex-wrap flex-start padb2" style="width: 96vw;">
						<view @tap="pre" v-show="page > 1" class="wh10-10  martb2 marlr1  round3  text-white flcc flex-fill ofh pos-r">
							<view class="wh10-10 flcc fs16">
								<text class="fa fa-angle-left"></text>
							</view>
							<ripple></ripple>
						</view>
						<view class="wh10-10  martb2 marlr1" style="visibility: hidden;" v-show="page == 1">0</view>
						<view class="wh10-10  martb2 marlr1" style="visibility: hidden;">0</view>
						<view class="wh10-10  martb2 marlr1" style="visibility: hidden;">0</view>
						<!-- <view class="wh10-10  martb2 marlr1" style="visibility: hidden;">0</view> -->

						<view @tap="showAll" class="wh10-10  martb2 marlr1  round3  text-white flcc flex-fill ofh pos-r">
							<view class="wh10-10 flcc fs12">
								全部
							</view>
							<ripple></ripple>
						</view>
						<view @tap="reload" class="wh10-10  martb2 marlr1  round3  text-white flcc flex-fill ofh pos-r">
							<view class="wh10-10 flcc fs12">
								刷新
							</view>
							<ripple></ripple>
						</view>
						<view class="wh10-10  martb2 marlr1" style="visibility: hidden;">0</view>
						<view class="wh10-10  martb2 marlr1" style="visibility: hidden;">0</view>
						
						<view @tap="next" class="wh10-10  martb2 marlr1  round3  text-white flcc flex-fill ofh pos-r">
							<view class="wh10-10 flcc fs16">
								<text class="fa fa-angle-right"></text>
							</view>
							<ripple></ripple>
						</view>
						
					<!-- 	<view @tap="showAll" class="wh10-10 mar3  round3 bcf flcc flex-fill ofh pos-r" v-show="data.length > 0">
							<view class="wh10-10 flcc fs8 c11">
								全部
							</view>
							<ripple></ripple>
						</view> -->
						<!-- 启用点击效果 -->
						<!-- <view @tap="selectDate(log.date)" :class="curDate == log.date?'animation-scale-out shadow3':'op9'" class="wh10-10 mar3  round3 bcf flcc flex-fill ofh pos-r"
						 v-for="log in data"> -->
						<!-- 关闭点击效果 -->
						<view @tap="selectDate(log.date)" class="wh10-10 mar3  round3 bcf flcc flex-fill ofh pos-r"
						 v-for="log in data" :key="log.date1">
							<view class="flex1 flex-r flex-fill tac w100 line-cyan bc13" v-show="log.maintain.length + log.check.length > 0">
								<view class="flex1 bg-orange flcc fs8" v-show="log.maintain.length > 0" :class="log.maintain.length == 0?'op2':''">
									保
								</view>
								<view class="flex1 bg-cyan flcc fs8" v-show="log.check.length > 0" :class="log.check.length == 0?'op2':''">
									检
								</view>
							</view>
							<view class="w100 tac lh15 flcc" :class="log.today?'bg-purple':'bg-white'" v-if="log.maintain.length + log.check.length > 0">
								<view class="fs5 fwb">{{log.date1}}</view>
							</view>
							<view class="w100 tac lh15 flcc wh10-10" :class="log.today?'bg-purple':'bg-white'" v-if="log.maintain.length + log.check.length == 0">
								<view class="fs14 fwb">{{log.day}}</view>
							</view>
							<ripple></ripple>
						</view>
					</view>
				</view>
			</view>
			<view class="pad3 lh2">
				<view class="flrc pad2 bcaf1 round3">
					
						<view class="flrc padtb2 flex1">
							<view class="wh5-5 flcc bg-orange">保</view>
							<view class="flex1 padl3">当日有保养计划</view>
						</view>
						<view class="flrc padtb2">
							<view class="wh5-5 flcc bg-cyan">检</view>
							<view class="flex1 padl3">当日有巡检计划</view>
						</view>
				</view>
				<view class="tac op9 pad2 bcaf1 round3 mart1">
					点击相应日期查看任务
				</view>
			</view>
		</view>
		<view @tap.stop="hideIt" class="pos-f cover" v-show="contentShow">
			<view :class="contentAnim" class="bcf round5 l0 r0 b0 pos-f padb20" style="z-index: 991;height: 80vh;overflow-y: auto;">
				<view class="flcc pad2 bg-cyan fs14 pos-r" @tap.stop="hideIt">
					<view class="fa fa-angle-down"></view>
					<ripple></ripple>
				</view>
				<view class="" v-for="log in data" v-if="log.maintain.length + log.check.length > 0 && (curDate == '' || curDate == log.date)">
					<view class="cu-timeline ">
						<view class="cu-time">
							<text class="fwb fs16 c11">{{log.date}}</text>
						</view>
						<view class="cu-item" @tap.stop='doNothing' v-for="item in log.maintain" v-if="isbool(log.maintain)">
							<view>
								<view class="bg-gradual-orange pad2 round3">
									<view class="flrc">
										<view class="cu-btn round3 sm c11 fwb">保养任务</view>
										<view class="flex1 padl2">{{item.sn}}</view>
									</view>
									<view class="bc13 pad2 round3 mart2">
										<machine :item="item.machine"></machine>
										<status classes="tac padtb2 round3 mart2" :item="item.status"></status>
									</view>
								</view>
							</view>
						</view>
						<view class="cu-item" @tap.stop='doNothing' v-for="item in log.check" v-if="isbool(log.check)">
							<view>
								<view class="bg-gradual-blue pad2 round3">
									<view class="flrc">
										<view class="cu-btn round3 sm c11 fwb">点检任务</view>
										<view class="flex1 padl2">{{item.sn}}</view>
									</view>
									<view class="bc13 pad2 round3 mart2">
										<machine :item="item.machine"></machine>
										<status classes="tac padtb2 round3 mart2" :item="item.status"></status>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="padt5 w100" v-show="showNoTask">

					<view class="pad5 bdda mar3 tac bcf c11">
						暂无计划任务
					</view>
				</view>
			</view>
		</view>


		<loading :loading="myIsLoading"></loading>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import List from '../../assets/js/list.js'
	import machine from '../../templete/machine/machine_item_simple.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			machine
		},
		data() {
			let list = new List()
			return {
				list,
				where: {
					eq: {
						status: '',
						emergency: '',
						level: '',
					}
				},
				search: "",
				data: [],
				page: 1,
				contentAnim: '',
				contentShow: false,
				curDate: '',
				showNoTask: false
			}
		},
		methods: {
			reload() {
				this.showLoading()
				this.list.setData({
					_order: '',
					_where: this.where,
					_search: this.search
				}).reload()
				this.showNoTask = false
				this.curDate = ""
			},
			doSearch() {
				// this.showLoading()
				this.list.setData({
					_order: '',
					_where: this.where,
					_search: this.search
				}).reload()
				this.showNoTask = false
				this.curDate = ""
			},
			next() {
				this.showLoading()
				this.list.setPage(this.page + 1).getList()
				this.page++
				this.showNoTask = false
			},
			pre() {
				if (this.page === 1) return
				this.showLoading()
				this.list.setPage(this.page - 1).getList()
				this.page--
				this.showNoTask = false
			},
			showAll() {
				let _this = this
				this.curDate = ""
				this.contentShow = true
				this.contentAnim = 'animation-slide-bottom'
				setTimeout(() => {
					this.contentAnim = ''
				}, 500)

			},
			selectDate(date) {
				let _this = this
				this.curDate = date
				this.showNoTask = false
				this.data.map(data => {
					if (data.date == date) {
						if (data.maintain.length + data.check.length == 0) {
							_this.showNoTask = true
						}
							this.contentShow = true
							this.contentAnim = 'animation-slide-bottom'
						setTimeout(() => {
							this.contentAnim = ''
						}, 600)
					}
				})

			},
			hideIt() {
				this.contentAnim = 'animation-slide-bottom animation-reverse'
				setTimeout(() => {
					this.contentAnim = ''
					this.contentShow = false
					this.curDate = ""
				}, 300)
			},
			doNothing() {
				
			}
		},
		mounted() {
			this.list.initMescroll(this).setUrl('/api/machine/timer').setData({
				_order: "",
				_where: this.where,
				_search: this.search,
			}).setCbFunc((allData, thisPage) => {
				this.data = thisPage.d
				this.clearLoading()
				// this.mescroll.endErr()
				// this.showNoTask = false
				// this.contentAnim = ''
				// this.contentShow = true
				// this.contentAnim = 'animation-slide-bottom'
				// setTimeout(() => {
				// 	this.contentAnim = ''
				// }, 300)
			}).reload()
		},
		onShow() {
			this.log("onshow")
			this.showLoading()
			this.list.reload()
		},
		watch: {}
	}
</script>

<style>

</style>
